<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>DataGrid</title>
  <script type="text/javascript" src="../core.js"></script>
  <script type="text/javascript" src="datagrid.js"></script>
  <style type="text/css">
  .datagrid-header-container{height:24px; overflow-y:hidden;}
  .datagrid-items-container{}
  .datagrid-pager-container{}
  .datagrid-column-selector-container{display:none; padding:0px; border:1px solid #718BB7; background:white; position:absolute; left:0px; top:0px; min-width:160px; width:auto !important; _width:160px; font:normal normal normal 12px/1.231 Tahoma,Helvetica,Arial,Simsun,sans-serif; z-index:3000;}
  .datagrid-column-selector-container dl{display:block; margin:0px; padding:0px; background:#f0f0f0;}
  .datagrid-column-selector-container dt, .datagrid-column-selector-container dd{display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; vertical-align:middle; margin:0px; padding:0px; height:24px; line-height:24px; cursor:default;}
  .datagrid-column-selector-container dt{width:24px; text-align:center; border-right:1px solid #999; color:#333;}
  .datagrid-column-selector-container dd{text-align:left; border-left:1px solid #fefefe; padding-left:4px;}
  .datagrid-column-selector-container .datagrid-overflow-items-hover{background:#D9E8FB;}
  .datagrid-header{background:#1670EB; margin:0px; padding:0px; font:normal normal normal 12px/1.231 Tahoma,Helvetica,Arial,Simsun,sans-serif;}
  .datagrid-header th{background:white;padding:0px;margin:0;}
  .datagrid-header .datagrid-header-column{position:relative; height:24px; line-height:24px; margin:0px; padding:0px;}
  .datagrid-header .datagrid-column-selector{display:none; height:26px; *height:24px; width:10px;background:#1670EB; position:absolute; right:0px; top:0px; font-size:0px; line-height:0px; cursor:pointer;}
  .datagrid-header .datagrid-column-selector cite{display:block; border-top:3px solid white; border-left:3px solid #1670EB; border-right:3px solid #1670EB; border-bottom:none; margin:12px 0px 0px 2px; *margin-top:10px; width:0px; height:0px; line-height:0px; font-size:0px;}
  .datagrid-items{background:#1670EB; margin:0px; padding:0px; font:normal normal normal 12px/1.231 Tahoma,Helvetica,Arial,Simsun,sans-serif;}
  .datagrid-items td{background:white; height:20px; line-height:20px; padding:0px;margin:0;}
  </style>
 </head>

 <body>

 </body>
 <script type="text/javascript">
 var heads = [
    { "column":"gameName", id:"col_gameName", "text":"中奖游戏", "width":94 },
    { "column":"prize", id:"col_prize", "text":"礼包/CDK", "width":156 },
    { "column":"state", id:"col_state", "text":"状态", "width":62 }
 ];
 var tmp = [];
 tmp.push({"gameName":"QQ宠物", "prize" : "极品礼包", "state" : "已领"});
 tmp.push({"gameName":"QQ宠物", "prize" : "极品礼包", "state" : "已领"});
 tmp.push({"gameName":"QQ宠物", "prize" : "极品礼包", "state" : "已领"});
 tmp.push({"gameName":"QQ宠物", "prize" : "极品礼包", "state" : "已领"});
 tmp.push({"gameName":"QQ宠物", "prize" : "极品礼包", "state" : "已领"});
 tmp.push({"gameName":"QQ宠物", "prize" : "极品礼包", "state" : "已领"});
 tmp.push({"gameName":"QQ宠物", "prize" : "极品礼包", "state" : "已领"});
 tmp.push({"gameName":"QQ宠物", "prize" : "极品礼包", "state" : "已领"});
 tmp.push({"gameName":"QQ宠物", "prize" : "极品礼包", "state" : "已领"});
 tmp.push({"gameName":"QQ宠物", "prize" : "极品礼包", "state" : "已领"});

 var grid = new XLib.DataGrid();
 var headColumn = null;
 for (var i = 0; i < heads.length; i++ )
 {
   headColumn = new XLib.DataGridColumn(heads[i]["column"]);
   headColumn.headerText = heads[i]["text"];
   headColumn.width = heads[i]["width"];
   headColumn.id = heads[i]["id"];
   grid.addColumn(headColumn);
 }
 grid.dataProvider = new XLib.DataProvider(tmp);
 grid.dragable = true;
 grid.colCount = 2;
 grid.drawDataGrid("test");
 </script>
</html>
